<template>
  <div class="folder-container">
    <!--目录条-->
    <div class="folder-nav flex">
      <i class="el-icon-d-arrow-left back" @click="prev"></i>
      <span @click="setTree(0)">根目录</span>
      <div v-for="(item, index) of trees" :key="'tree-' + index" class="flex">
        <i class="el-icon-arrow-right" />
        <span @click="setTree(index + 1)">{{ item.name }}</span>
      </div>
    </div>

    <!--目录列表-->
    <div v-for="(item, index) of dirs" :key="index" class="flex folder no-select" @click="next(index)" @contextmenu.prevent="setFolder(index)">
      <img src="static/dir.png" class="dir-icon" />
      <span>{{ item.name }}</span>
      <i v-if="!newFolder.setting" class="icon el-icon-arrow-right"></i>
      <i v-if="newFolder.setting" class="icon el-icon-circle-close" style="color:red;" @click.stop="delFolder(index)"></i>
    </div>

    <!--新增输入框-->
    <div v-if="newFolder.editing" class="flex folder new-folder">
      <img src="/static/dir.png" class="dir-icon" alt="" />
      <el-input v-model="newFolder.name" class="new-input" @keyup.enter.native="addFolder" />
      <i class="el-icon-circle-check new-check" @click="addFolder" />
      <i class="el-icon-circle-close new-check" @click="newFolder.editing = false" />
    </div>

    <!--新增按钮-->
    <div v-if="!newFolder.editing" class="add-container flex">
      <i v-if="newFolder.setting === false" class="icon el-icon-plus" @click="newFolder.editing = true"></i>
      <i v-if="newFolder.setting === false" class="icon el-icon-setting" @click="newFolder.setting = true"></i>
      <i v-if="newFolder.setting === true" class="icon el-icon-remove-outline" @click="newFolder.setting = false"></i>
      <span class="flex-1"></span>
    </div>
  </div>
</template>

<script>
import folder from '@/api/folder'
import { checkSpecialString } from '@/utils/tools'
export default {
  name: 'SetDir',
  components: {},
  props: {
    onChange: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dirs: [],
      trees: [],
      newFolder: {
        name: '',
        editing: false,
        setting: false
      }
    }
  },
  created() {
    this.getFolders()
  },
  methods: {
    // 添加新目录
    addFolder() {
      const folderName = this.newFolder.name.trim()
      // 检查 1：为空 2：已存在 3：特殊字符
      if (! folderName || this.dirs.indexOf(folderName) >= 0 || checkSpecialString(folderName)) {
        return
      }
      let pid = 0
      if (this.trees.length > 0) {
        pid = this.trees[this.trees.length-1].id
      }

      // 新增目录
      folder.add(pid, folderName).then(res => {
        this.dirs.push(res.data)
        this.newFolder.name = ''
        this.newFolder.editing = false
      }).catch(() => {})
    },
    next(index) {
      this.trees.push(this.dirs[index])
      this.getFolders()
    },
    prev() {
      if (this.trees.length) {
        this.trees.splice(this.trees.length - 1, 1)
        this.getFolders()
      }
    },
    setTree(index) {
      this.trees.splice(index, 100)
      this.getFolders()
    },
    setFolder(name) {
      console.log(name)
    },
    // 扫描目录
    getFolders() {
      this.dirs = []
      let pid = 0
      let path = ''
      if (this.trees.length > 0) {
        let dir = this.trees[this.trees.length-1]
        pid = dir.id
        path = dir.path + '/' + dir.name
      }
      this.onChange(path)
      folder.list(pid).then(res=> {
        this.dirs = res.data
      }).catch(() => {})
    },
    delFolder(index) {
      let id = this.dirs[index].id
      folder.delete(id).then(res => {
        this.getFolders()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.folder-container{
  border: 1px solid #ccc;
  margin-right: 10px;
}

.folder-nav{
  padding: 12px;
  cursor: pointer;
  //background: #1890FF;
  background-color: #3A71A8;
  color: #fff;
  .back{
    border: 1px solid rgba(255, 255, 255, .5);
  }
  span:hover{
    background: #fff;
    color: #3A71A8;
  }
}
.folder{
  vertical-align: middle;
  line-height: 30px;
  cursor: pointer;
  span,.dir-icon, i{
    vertical-align: middle;
    line-height: inherit;
  }
  .icon{
    margin-left: 10px;
  }
}
.dir-icon{
  width: 30px;
}

.folder:hover{
  color: #409EFF;
}

.add-container{
  text-align: center;
  background-color: #999;
  color: #fff;
  font-weight: bold;
  padding: 5px 0;
  cursor: pointer;

  .icon{
    margin-left: 10px;
  }
  .icon:hover{
    color: #409EFF;
  }
}

.new-folder{
  margin-top: 10px;
  .new-input{
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin-right: 5px;
  }
  /deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  .new-check{
    margin: 0 5px;
  }
}

</style>
